<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文件夹挂件</title>
    <link rel="stylesheet" href="../common/style/reset.css" />
  </head>
  <style>
    :root {
      --spacing: 10px;
      --opacity: 0.4;
      --iconSize: 30px;
    }

    .folder-box {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 15px;
      background-color: rgba(255, 255, 255, 0.4);
      /* background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%); */
    }

 
    .icon-box {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      /* flex-wrap: wrap; */
      /* align-items: center; */
      /* justify-content: ; */
      overflow-y: auto;
      /* 隐藏滚动条 */
      scrollbar-width: none; /* 隐藏火狐浏览器滚动条 */
      -ms-overflow-style: none; /* 隐藏IE和Edge滚动条 */
    }

    .icon-box::-webkit-scrollbar {
      /* 隐藏Webkit内核（Chrome、Safari等）滚动条 */
      display: none;
    }

    .icon-box li {
      list-style: none;
      padding: 0;
      display: inline-block;
      width: var(--iconSize);
      /* height: calc(var(--iconSize) + var(--iconSize) / 3 + 3px); */
      margin: 10px var(--spacing);
    }

    .icon-box li img {
      width: var(--iconSize);
      height: var(--iconSize);
      transform: scale(0);
    }

    .icon-box li span {
      display: inline-block;
      margin-top: 3px;
      width: 100%;
      height: calc(var(--iconSize) / 3.1 + 3px);
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: calc(var(--iconSize) / 3.1);
      color: #000;
      /* transform: scale(0); */
    }


    .icon-box li .to-an {
      animation: toAn 0.3s linear 0s forwards;
    }

    .icon-box li .uot-an {
      animation: uotAn 0.3s linear 0s forwards;
      transform: scale(1);
    }

    @keyframes toAn {
      0% {
        transform: scale(0);
      }

      100% {
        transform: scale(1);
      }
    }

    @keyframes uotAn {
      0% {
        transform: scale(1);
      }

      100% {
        transform: scale(0);
      }
    }
  </style>
  <body>
    <div class="folder-box">
      <ul class="icon-box"></ul>
    </div>
  </body>
  <script type="module" src="../common/js/setting.js"></script>
  <script type="module" src="../common/js/menu.js"></script>
  <script type="module" src="../common/js/move.js"></script>
  <script type="module" src="../common/js/counter.js"></script>
  <script type="module">
    import { debounce } from "../common/utils/utils.js";

    const ulEl = document.querySelector(".icon-box");
    const rightMenuEl = document.querySelector(".right-menu");
    const folderBoxEl = document.querySelector(".folder-box");

    let data = {
      selectIcons: [],
      spacing: 10,
      iconSize: 30,
      opacity: 40,
      switch: false,
    };

    const getFileName = (url) => {
      return url.split(".")[0].split("/").pop();
    }

    const renderLIst = (list = data) => {
      if (!list || !list.length) return;
      let html = "";
      list.forEach((item, index) => {
        let name = getFileName(item.name)
        html += `<li title="${item.name}"><img class="to-an" style="animation-delay:${index * 0.2}s;" url="${item.url}" src="${item.icon}" alt="">
          ${ data.switch ? '' : '<span>' + name +'</span>' }</li>`;
      });
      ulEl.innerHTML = html;
    };

    const renderItem = (icon) => {
      // 向元素内添加元素
      let liEl = document.createElement("li");
      liEl.setAttribute("title", icon.name);
      let name = getFileName(icon.name)
      liEl.innerHTML = `<img class="to-an" url="${icon.url}" src="${icon.icon}" alt="">${ data.switch ? '' : '<span>' + name +'</span>' }`;
      ulEl.appendChild(liEl);
    };

    const renderSpacing = () => {
      if (!data) return;

      document.documentElement.style.setProperty(
        "--spacing",
        `${data.spacing}px`
      );
      document.documentElement.style.setProperty(
        "--iconSize",
        `${data.iconSize}px`
      );

      folderBoxEl.style.backgroundColor = `rgba(255,255,255, ${
        data.opacity / 100
      })`;
    };


    if (window.ipcRenderer) {
      window.ipcRenderer.on("toParent", (event, res) => {
        const { data: info, addSelectIcon, deleteSelectIcon } = res;
        // imgSrc = src;
        // imgEl.src = src;
        // window.sendSaveData({ src });
        let bool = data.switch !== info.switch;
        data = info;
        if(bool){
          renderLIst(data.selectIcons)
        }
        if (addSelectIcon) {
          renderItem(addSelectIcon);
        } else if (deleteSelectIcon) {
          let iconEls = ulEl.querySelectorAll("img");
          iconEls.forEach((item) => {
            if (item.getAttribute("url") === deleteSelectIcon.url) {
              item.classList.remove("to-an");
              item.classList.add("uot-an");
              item.style.animationDelay = "0s";
              let time = setTimeout(() => {
                item.parentElement.remove();
                clearTimeout(time);
              }, 300);
            }
          });
        } else {
          renderSpacing();
        }

        window.sendSaveData(data);
      });

      window.ipcRenderer.on("init", (event, res) => {
        let paths = res.selectIcons.filter(item=>{
          let bool = window.isValidUrl(item.url)
          return bool
        })
        data = {
          selectIcons: res ? paths : [],
          spacing: res ? res.spacing : 10,
          iconSize: res ? res.iconSize : 30,
          opacity: res ? res.opacity : 40,
          switch: res ? res.switch : false,
        }
        renderLIst(data?.selectIcons);
        renderSpacing();
        window.sendSaveData(data);
      });
    }

    window.getData = () => data;

    ulEl.addEventListener("click", window.triggerHandle((e) => {
      let url = e.target.getAttribute("url");
      if (window.utools) {
        utools.shellOpenPath(url);
      }
    }));

    document.addEventListener(
      "dragenter",
      (e) => {
        e.stopPropagation();
        e.preventDefault();
      },
      false
    );
    document.addEventListener(
      "dragover",
      (e) => {
        e.stopPropagation();
        e.preventDefault();
      },
      false
    );
    document.addEventListener("drop", (e)=>{
      let files = e.dataTransfer.files;
      let arr = []

      for (const file of files) {
        let obj = {
          icon: utools.getFileIcon(file.path),
          url: file.path,
          name: file.name
        }
        renderItem(obj)
        arr.push(obj)
      }


      data.selectIcons = [...data.selectIcons, ...arr]
      window.sendSaveData(data);

    }, false);
  </script>
</html>
